<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Font-Family - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">font-family</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>]
    [<b><i class="fs">IE3B1</i></b>|<b class="s">N4B2</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Font Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="fontsizeadjust.htm">font-size-adjust</a><br>
    <a href="fontstretch.htm">font-stretch</a><br>
    <a href="font.htm">font</a><br>
    <a href="fontstyle.htm">font-style</a><br></td>
    <td valign=top><a href="fontvariant.htm">font-variant</a><br>
    <a href="fontweight.htm">font-weight</a><br>
    <a href="fontsize.htm">font-size</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td>Browser dependent</td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>Yes</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>&lt;<b class="tagname">font</b>
        <span class="tagattrib">FACE</span>=&quot;font1, font2, ...fontN&quot;&gt;</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#font-family">CSS1: Sect 5.6.2</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-family-prop">CSS2: Sect 15.2.2</a>,
        <a href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop">CSS2.1: Sect 15.3</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>A 'font-family' is a group of fonts that exhibit similar characteristics.
       The 'font-family' property indicates a prioritized list of specific/generic
       font family names to use to display text content in the current container.
       At least one specific or general font family must be given. If the
       specified font does not exist, or the necessary glyph is not available
       in the specified font, the next font is tried. This process continues
       through the prioritized list until no more are available. If no match
       is made, the browser default font family should be used.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">N6</i></b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">serif</b> | <b class="subheading">sans-serif</b> |
    <b class="subheading">cursive</b> | <b class="subheading">fantasy</b> |
 <b class="subheading">monospace</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3</i></b>|<b class="s">N4B2</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        These values refer to generic font families that have certain visual
        characteristics. Browsers will attempt to map an existing font for the
        selection using this generic family specification. It is recommended to
        offer a generic font family value as a last alternative after specifying
        specific font family names.</dd>

<dt><b class="subheading">[specific font-family]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3B1</i></b>|<b class="s">N4B2</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This value will be a string identifying a specific font. Font names
        containing white space should be quoted (else the value is normalized.) </dd>
</dl>

<dl>
<dt><big><b class="mainheading">Syntax</b></big>
    <dd><b class="selector">Selector</b> { <span class="property">font-family</span>:
        (([family-name] | [generic-family]),)* ([family-name] | [generic-family]) }
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">div.fixedwidth</b>
        { <span class="property">font-family:</span> Courier, "Courier New", monospace }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">div</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">font-family:</span>
        Courier, 'Courier New', monospace&quot;&gt;text&lt;/<b
        class="tagname">div</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">All</b>
        <dl>
            <dd>- There is little agreement about what constitutes a font from
                the "cursive" and "fantasy" generic font-families.
            <dd>- The "inherit" value is listed in the standards for this property, although 
                the property is itself inherited. This means it is impossible to check
                to see if this value is actually supported in any browser. Mozilla began 
                generally supporting "inherit" where appropriate in version 6.x, and 
                Opera beginning mostly in 7.x. IE does not yet support "inherit" anywhere 
                yet. So, for all inherited properties, support information for the 
                "inherit" value will be listed as beginning in these respective versions.
        </dl>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">3.0:</b>
            <dd>- Use of font family names containing spaces is not supported
                for inline styles. External and embedded styles are OK.
            <dd>- Using a list of fonts for the Font-family value can cause
                subsequent declarations in a style rule to fail. The easy fix
                for this behavior is to list the Font-family property last in
                any style rule.
            <dd>- Font-family names containing spaces should be contained in
                double or single quotes. The declaration must also be explicitly
                terminated by a semi-colon (which should be optional if no other
                declarations follow it in the rule) for subsequent rules to be
                parsed correctly.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
            <dd><b class="alert2">4.x:</b>
            <dd>- The "Cursive" generic font-family appears to be treated as
                "Serif" and "Fantasy" appears to be treated as "Sans-Serif."
            <dd>- If you use the 'font' property, you <em>MUST</em> specify
                <em>BOTH</em> the 'font-size' and 'font-family' sub-components
                of this property or else the style declaration will be ignored -
                even if you have also set the 'font-size' and 'font-family'
                properties individually for the same selector! Specifying both
                of these sub-properties for 'font' is actually required under
                the specifications, but Netscape is the only browser that
                requires it. IE and Opera are fine if you only use one of these.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">3.5:</b>
            <dd>- Listing an unknown font, followed by a known font does not use the
                known font-family. It uses instead the default font-family.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>